<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <title>SYSCVSA</title>
        </f:facet>
 
        <h:outputStylesheet library="css" name="bootstrap.min.css"/>
        <h:outputStylesheet library="css" name="bootstrap-responsive.min.css"/>
        <h:outputStylesheet library="css" name="myapp.css"/>
        <h:outputStylesheet library="css" name="default.css"/>
        <h:outputStylesheet library="css" name="tableLayout.css"/>

        <h:outputStylesheet library="css" name="Base.css"/>
        <h:outputStylesheet library="css" name="BreadCrumb.css"/>


        <h:outputScript library="js" name="modernizr.custom.05531.js"/>
        <h:outputScript library="primefaces" name="jquery/jquery.js" />
        <h:outputScript library="js" name="jquery.easing.1.3.js"/>
        <h:outputScript library="js" name="jquery.jBreadCrumb.1.1.js"/>
        <h:outputScript library="js" name="jquery.protect-data.pack.js"/>


        <script type="text/javascript">
            function handleDrop(event, ui) {
                var droppedCar = ui.draggable;
                droppedCar.fadeOut('fast');

            }

            jQuery(document).ready(function()
            {
                //jQuery("#breadCrumb0").jBreadCrumb();

                //basic and ajax protection
                jQuery('form').protectData();
            
            })



        </script>

        <style type="text/css">
            li {list-style-type: none;}
            .menuLabel{
                padding-left: 0px;
                margin-left: 0px;
                color: #444;
            }
            .raised{
                -webkit-box-shadow: 1px 7px 8px 0px rgba(50, 50, 50, 0.52);
                -moz-box-shadow:    1px 7px 8px 0px rgba(50, 50, 50, 0.52);
                box-shadow:         1px 7px 8px 0px rgba(50, 50, 50, 0.52);
            }

            ol.progtrckr {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ol.progtrckr li {
                display: inline-block;
                text-align: center;
                line-height: 3em;
                font-size: 10pt;
            }

            ol.progtrckr[data-progtrckr-steps="2"] li { width: 35%; }
            ol.progtrckr[data-progtrckr-steps="3"] li { width: 28%; }
            ol.progtrckr[data-progtrckr-steps="4"] li { width: 19%; }
            ol.progtrckr[data-progtrckr-steps="5"] li { width: 16%; }
            ol.progtrckr[data-progtrckr-steps="6"] li { width: 12%; }
            ol.progtrckr[data-progtrckr-steps="7"] li { width: 10%; }
            ol.progtrckr[data-progtrckr-steps="8"] li { width: 9%; }
            ol.progtrckr[data-progtrckr-steps="9"] li { width: 8%; }
            ol.progtrckr li.progtrckr-done {
                color: black;
                border-bottom: 4px solid yellowgreen;
            }
            ol.progtrckr li.progtrckr-todo {
                color: silver; 
                border-bottom: 4px solid silver;
            }
            ol.progtrckr li:after {
                content: "\00a0\00a0";
            }
            ol.progtrckr li:before {
                position: relative;
                bottom: -2.5em;
                float: left;
                left: 50%;
                line-height: 1em;
            }
            ol.progtrckr li.progtrckr-done:before {
                content: "\2713";
                color: white;
                background-color: yellowgreen;
                height: 1.2em;
                width: 1.2em;
                line-height: 1.2em;
                border: none;
                border-radius: 1.2em;
            }
            ol.progtrckr li.progtrckr-todo:before {
                content: "\039F";
                color: silver;
                background-color: white;
                font-size: 1.5em;
                bottom: -1.6em;
            } 
            
          
        </style>
    </h:head>

    <h:body style="padding: 0px;margin: 0px;height: 100%;" >
        <div class="container-fluid" style="padding: 0px;margin: 0px;height: 100%;">

            <div class="row-fluid" style="height: 100%;">
                <div class="row-fluid">
                    <span class="span12" style="padding: 0px;margin: 0px;">
                        <div style="width: 100%;">
                            <h:form style="margin: 0;padding: 0">
                                <div id='cssmenu' style="margin: 0;padding: 0">
                                    <ul>
                                        <ui:insert name="menuModulos"/>
                                    </ul>
                                </div>
                            </h:form>
                        </div>
                        <div class="row-fluid">
                            <span class="span2" style="height: 94%;background-color: #ccc;padding: 0px;width: 17%">
                                <div style="vertical-align: middle;text-align: center;">
                                    <img src="#{resource['img/logo.png']}"/> 
                                </div>
                                <p:separator/>

                                <div class="items">
                                    <ui:insert name="menuLateral"/> 
                                </div>

                            </span>
                            <span class="span10" style="margin: 0%;width: 83%;height: 94%;">

                                <div class="row-fluid">

                                    <span class="span12">
                                        <div class="row-fluid">

                                            <span class="span12">
                                                <div style="width: 100%;height: 100%">



                                                    <ui:insert name="cuerpo"/>
                                                </div>
                                            </span>
                                        </div>

                                    </span>
                                </div>
                            </span>
                        </div>

                    </span>
                </div>

            </div>
        </div>

    </h:body>

</html>
